import React, { useEffect, useState, useRef } from 'react';
import Router from '@/utils/router';
import { Mask } from '@/components/UiComponents'
import { View, Button } from '@tarojs/components'
import { backgroundObj } from '@/utils/utils'
const maskPrize = (props) => {
  const { visible = {}, unionId, onClose, onLinkPeople, hpFlag = '0' } = props
  const { show = false, detail = {} } = visible
  const { userPrizeList = [], } = detail
  const [prizeObj, setPrizeObj] = useState(false)
  useEffect(() => {
    if (show) {
      setPrizeObj(userPrizeList.reduce((item, val) => { if (val.unionId === unionId) { return val } else { return item } }, {}))
    }
    else {
      setPrizeObj({})
    }
  }, [show])

  const { goodsCover } = prizeObj
  if (show) {
    return <Mask
      show={show}
      zIndex={1000000001}
      closeBtn={false}
      onClose={() => {
        onClose(false)
      }}
    >
      <View className={hpFlag === '1' ? 'maskPrize_box maskPrize_box_hp' : 'maskPrize_box'}>
        <View>
          <View className='maskPrize_content'>
            {goodsCover ?
              <View className='maskPrize_content_title'>恭喜你中奖了</View>
              :
              <View className='maskPrize_content_title'>很遗憾，未中奖</View>}
            {goodsCover ?
              <View style={backgroundObj(goodsCover)} className='maskPrize_content_logo'></View>
              :
              <View className='maskPrize_content_logo  maskPrize_content_error'></View>}
            <View className='maskPrize_content_btn'>
              <View onClick={() => {
                onLinkPeople()
              }} className='maskPrize_content_prople'>中奖名单</View>
              <View onClick={
                () => Router('prizeList')} className='maskPrize_content_myGift'>我的奖品</View></View>

          </View>
          <View className='maskPrize_close' onClick={onClose}></View>
        </View>

      </View>
    </Mask>
  }
  else {
    return null
  }
}
export default maskPrize